<template>
  <!-- 柱状图 -->
  <div id="BarChart">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>

export default {
  name: "BarChart",
  components: {},
  props: ["series" ,"series2" ,"series3" , "series1", "yAxios"],
  data() {
    return {
      value: 60,
    };
  },
  computed: {},
  watch: {
    yAxios: {
      handler: function(newVal, oldVal) {
          this.drawBarChart()
      },
      deep: true,
      // immediate: true
    },
  },
  created() {
   //   练习使用 webSocket 使用
   // 第一个参数 当前组件的 唯一标识  第二个参数需要变化的函数 注册
   this.$socket.registerCallBack('BarChartData',this.getData)
  },
  mounted() {
    this.drawBarChart();
   //  发送数据给服务器,告诉服务器,我现在需要数据
    this.$socket.send({
       actions: 'getData',
       socketType: 'BarChartData',
       chartName: 'BarChart',
       value: ''

    })
  },
  destroyed() {
   //   组件销毁后后 就需要销毁组件
   this.$socket.unRegisterCallBack("BarChartData")
  },

  methods: {
   //   练习 随便写的接口
     getData(ret) {

     },
    drawBarChart() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: '20px',
          left: "0",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
            onZero: true,
            lineStyle: {
              color: "#c3dfff"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#1f4675'],
              width: 1,
              // type: 'dashed'
            }
          },
        },
        yAxis: {
          type: "category",
          data: that.yAxios,
          //y轴文字样式
          axisLabel: {
            textStyle: {
              color: "#c3dfff"
            }
          },
          // 网格线的颜色
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     color: ['#1f4675'],
          //     width: 1,
          //     // type: 'dashed'
          //   }
          // },
          // y轴轴线配置
          axisLine: {
            show: false,
          },
          // y轴刻度配置
          axisTick:{ //y轴刻度线
            show:false
          },
        },
        series: [
          {
            name: "预警",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: that.series,
            itemStyle: {
              normal: {
                color: "#ff7372"
              }
            },
            barWidth: 20 // 控制柱子的宽度
          },
          {
            name: "关注",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: that.series2,
            itemStyle: {
              normal: {
                color: "#f5de5a"
              }
            }
          },
          {
            name: "正常",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: that.series3,
            itemStyle: {
              normal: {
                color: "#71c184"
              }
            }
          },

        ],
      };
      mychart.setOption(option);
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener('resize', resizeFn);
        this.$once('hook:beforeDestroy', () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener('resize', resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#BarChart {
  width: 100%;
  height: 100%;
  // margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>